<template>
  <div>
    <dog
      v-for="(item, index) in list" :key="index"
      :img="item.dogImgUrl"
      :dogname="item.dogName"
      @love="fn"
    ></dog>

    <hr />
    <p>显示喜欢的狗:</p>
    <ul>
      <li v-for="(item, index) in arr" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
import dog from "./components/dog3.vue";
export default {
  data() {
    return {
         list: [
        {
          dogImgUrl:"https://ss0.baidu.com/-Po3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/0ff41bd5ad6eddc4da68cd7b39dbb6fd536633a6.jpg",
          dogName: "博美",
        },
        {
          dogImgUrl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fzumengchong.com%2Fuploads%2Fallimg%2F200505%2F1-200505115253.jpg&refer=http%3A%2F%2Fzumengchong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669466613&t=1f1ee2348895a66bb0f8417106e70fd2",
          dogName: "泰迪",
        },
        {
          dogImgUrl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201312%2F26%2F20131226151644_KyK5Q.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669466613&t=1ef03ca88a9497e1a21068096e900e6d",
          dogName: "金毛",
        },
        {
          dogImgUrl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.alicdn.com%2Fbao%2Fuploaded%2Fi2%2F2213337071196%2FO1CN01TFvSww1KhoS8KRihH_%21%212213337071196.jpg&refer=http%3A%2F%2Fimg.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669466613&t=1dd5bb530dc6565ae76c2dcb02ffe334",
          dogName: "哈士奇",
        },
        {
          dogImgUrl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg-baofun.zhhainiao.com%2Ffs%2Fb0aa690d2cc8e80361502b93a605f49f.jpg&refer=http%3A%2F%2Fimg-baofun.zhhainiao.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669466613&t=dd9ee672c9b553ab400a29f85206eb75",
          dogName: "阿拉斯加",
        },
        {
          dogImgUrl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.pig66.com%2Fuploadfile%2F2017%2F1220%2F20171220121412352.png&refer=http%3A%2F%2Fwww.pig66.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669466613&t=d41ce85103209e13eaa11ff7e86e4a33",
          dogName: "萨摩耶",
        },
      ],
      arr: []
    };
  },
  components: {
    dog,
  },
  methods: {
    fn(dogName) {
      this.arr.push(dogName)
    },
  },
};
</script>

<style >
</style>